<template>
  <div class="container">
    <div class="header"></div>
    <div class="bottom">
      <div class="map-container">
        <div class="map-container-inner">
          <div class="title-select">
            <div class="title">
              <button class="custom-btn btn-3" style="border-top-left-radius: 0;">
                <span>轨迹图</span>
              </button>
            </div>
            <div class="select">
              <SelectComponent />
            </div>
          </div>
          <div id="map"></div>
        </div>
      </div>
      <div class="right">
        <div class="info base-info">
          <div class="info-inner">
            <button class="custom-btn btn-3">
              <span>基本信息</span>
            </button>
            <BaseInfoTable />
          </div>
        </div>

        <div class="space"></div>

        <div class="info position-info">
          <div class="info-inner">
            <div></div>
            <button class="custom-btn btn-3" style="border-top-left-radius: 8px;">
              <span>位置信息</span>
            </button>
            <PositionInfoTable />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { reactive, onMounted } from "vue";
import SelectComponent from "./components/SelectComponent.vue";
import BaseInfoTable from "./components/BaseInfoTable.vue";
import setAntPathPolyline from "./tools/setAntPathPolyline.ts";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore();

onMounted(() => {
  mapStore.map = L.map("map").setView([39.898457, 116.391844], 13);
  console.log("mapStore.map");
  console.log(mapStore.map)

  L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    minZoom: 7,
    maxZoom: 16,
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(mapStore.map);

  setAntPathPolyline(mapStore.map);
});
</script>
<style scoped>
#container {
  height: 100% !important;
  width: 100% !important;
}

.header {
  height: 90px;
  /* background:url("./assets/head_bg.png") no-repeat scroll center 0; */
}

.bottom {
  display: flex;
  height: calc(100vh - 90px);
}

.map-container {
  border: 2px solid #0b4175;
  border-radius: 10px;
  height: 100%;
  flex: 1;
  padding: 1px;
  margin-left: 5px;
  min-width: 400px;
}

.map-container-inner {
  border-radius: 10px;
  background: #0b4175;
  height: 100%;
}

.title-select {
  height: 50px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  color: #fff;
}

.select {
  color: #fff;
}

#map {
  height: calc(100% - 50px);
  /* border-radius: 10px; */
}

.right {
  width: 700px;
  margin-left: 10px;
  padding-right: 5px;
  height: 100%;
  overflow: auto;
}

.info {
  border: 2px solid #0b4175;
  border-radius: 10px;
  height: 260px;
  padding: 1px;
}

.info-inner {
  border-radius: 10px;
  background: rgba(11, 65, 117, 0.9);
  height: 100%;
}

.base-info {
  height: 300px;
  color: #fff;
  overflow: auto;
}

.position-info {
  height: 350px;
  color: #fff;
}
</style>
